<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索功能</title>
<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.content {
    width: 1200px;
    height: auto;
    min-height: 600px;
    margin: 50px auto;
    position: relative;
    padding-bottom: 80px;
}

footer {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#table-1 {
  width: 1200px;
  line-height: 35px;
  text-align: center;
  margin-top: 20px;
}

#lin {
  margin: 20px 0;
  height: 30px;
  padding: 5px;
  box-sizing: border-box;
}

#addForm {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#addForm label {
  display: block;
  margin-bottom: 10px;
}

#addForm input[type="text"] {
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

#addForm input[type="submit"] {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}


#addForm1 {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#addForm1 label {
  display: block;
  margin-bottom: 10px;
}

#addForm1 input[type="text"] {
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

#addForm1 input[type="submit"] {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}


.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.edit-link {
  display: inline-block;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
}

.delete-link {
  display: inline-block;
  padding: 5px 10px;
  background-color: #dc3545;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
}

#addLink {
  display: inline-block;
  padding: 5px 10px;
  background-color: #28a745;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
}

#addLink:hover {
  background-color: #218838;
}

</style>
</head>
<body>
<div class="content">
  <input type="text" id="lin" placeholder="请输入需要搜索的信息">
  <table id="table-1" cellspacing='0' border="1">
    <tr>
      <th>id</th>
      <th>ip</th>
      <th>访问时间</th>
      <th>来访地址</th>
      <th>访问页面</th>
      <th>停留时间</th>
    </tr>
    <?php 
    $servername = "127.0.0.1";
    $username = "test_ynhbg_com";
    $password = "z2wR5fXj6yY5aZM9";
    $dbname = "test_ynhbg_com";
    
    // 创建数据库连接
    $con = new mysqli($servername, $username, $password, $dbname);
    $sql="SELECT * FROM ay_visit_log order by id DESC";
    $find=mysqli_query($con,$sql);
    foreach ($find as $key => $value) {
      echo "
      <tr>
        <td>".$value['id']."</td>
        <td>".$value['ip']."</td>
        <td>".date("H:i:s" ,$value['addtime'])."</td>
        <td>".$value['city']."</td>
        <td>".$value['url']."</td>
        <td>".date("H:i:s" ,$value['visittime']-60*60*8)."</td>
        
      </tr>";
    }
    ?>
  </table>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lin_search.js"></script>
<script type="text/javascript">

    var table = document.getElementById("table-1");
    var input = document.getElementById("lin");

    input.onkeyup = function () {
        new Search(table, input);
    }
</script>
</body>
</html>
